<template>
	<view>
		<u-popup v-model="passPopup" mode="center" height="auto" width="550rpx" borderRadius="20">
			<view class="flex flex-column align-center u-p-30">
				<text class="u-font-26 font-weight-bold">请输入支付密码</text>
				<view class="u-p-y-50">
					<u-message-input :value="paypwd" :dot-fill="true" :focus="true" :maxlength="6" @finish="finish"></u-message-input>
				</view>
				<view class="flex flex-1 justify-between u-m-t-50 u-p-x-30" style="width: 100%;">
					<dy-button width="160rpx" backgroundColor="#ccc" borderColor="#ccc" @click="passPopup = false">取消</dy-button>
					<dy-button width="160rpx" @click="confirm" :disabled="isDisabled">确认</dy-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"dy-pass-popup",
		data() {
			return {
				isDisabled: true,
				passPopup: false,
				paypwd: ''
			};
		},
		methods: {
			finish(e) {
				this.paypwd = e
				this.isDisabled = false
				this.$emit('confirm', this.paypwd)
			},
			open() {
				this.passPopup = true
			},
			close() {
				this.passPopup = false
			},
			confirm() {
				this.$emit('confirm', this.paypwd)
				this.paypwd = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep.u-char-item {
	width: 55rpx !important;
	height: 55rpx !important;
}
</style>
